[제이쿼리/CSS] 텍스트 반짝이는 효과 만들기, blink

텍스트가 반짝이는 효과를 가지려면 어떻게 해야할까요? css 또는 자바스크립트를 사용하여 가능합니다. 아래에서는 텍스트에 반짝이는 효과를 만드는 방법을 자세히 알아보려고 합니다.

# 텍스트 반짝이는 효과 만들기, blink

우선 태그 및 css를 사용하는 방법을 알아보겠습니다. 그 전에 아래의 내용을 알아둘 필요가 있습니다.

! 간편했던 태그 및 스타일 지정의 축소

문자를 깜박이게 하는 방법으로 blink 태그를 사용하는 방법과 CSS를 적용하는 방법이 있습니다. 하지만 이 방법들은 현재 구현이 되지 않으며 웹표준 역시 아니므로 Deprecated되었습니다. 더 이상 사용해서는 안되겠지요. 아래를 참고하세요.
 

• 1. Blink 태그는 w3c에서 지정한 표준태그가 아니라 더 이상 사용하지 말아야하며 기능 구현이 축소되고 있음
• 2. CSS를 사용한 text-decoration: blink; 역시 권고사항이 아니기 때문에 사용하지 않는 것이 올바름.

즉 아래 방법은 사용할 수 없거나 사용하지 않도록 권고되고 있습니다.
@ blink.html

@ blink.css

! 왜 축소되었을까

생각해보면 이해할 수 있습니다. 웹 초창기에 사용할 수 있던 효과라면 폰트의 크기나 색을 바꾸는 것 정도가 다였습니다. 깜박이는 효과를 포함해서요. 하지만 요즘은 훨씬 다양한 효과 및 에니메이션이 가능하게되었습니다. 더 이상 반짝이는 효과가 거의 쓰이지 않게되었죠... 게다가 이 효과는 성능에도 큰 영향을 미치므로 계속해서 반짝이는 것은 바람직하지 않을 수 있죠.

! 그렇다면 다른 방법 대안은 무엇인가

최신 버젼의 브라우저를 통해 시험해본 결과 위의 방법들이 구현되지 않음을 알았습니다. (크롬 및 파이어폭스 등등 ...) 결국 자바스크립트를 이용해야 모든 브라우저 환경에서 원하는 결과를 얻을 수 있을 것입니다.

그렇다면 깜박이는 문자를 어떻게 구현하는게 좋을까요? 제이쿼리(jQuery)의 toggle() 메소드를 사용하면 간단하게 구현이 가능합니다! 아래 예제를 봐주세요.

# 블링크 텍스트 깜박이는 문자 예제 소스

아래는 계속해서 깜박이는 예제를 만들어보려 합니다. 먼저 이 코드를 실행하면 어래처럼 매우 반짝이는 효과를 가진 텍스트가 보이게됨니다.

TEST : Blink Text

그렇다면 소스코드는 어떻게될까요? 아래는 제이쿼리를 사용하여 구현한 소스 코드입니다.
@ blink.html

아래는 제이쿼리 소스코드입니다.
@ blink.js

이제 깜박이는 텍스트 구현이 완성되었습니다. 여기에 사용된 toggle() 메소드는 특정 요소에 사용할 경우 해당 엘리먼트를 숨기고 보여주는 것을 반복합니다.

위 코드의 장점은 제이쿼리 선택자로 모든 클래스에 사용하였기 때문에 모든 요소를 찾아 적용시킨다는 것입니다. 깜박여야 할 요소가 많아도 모두 잘 동작합니다.